li.active a {
  /*color: withe; !* 激活状态的文字颜色为白色 *!*/
  /*background-color: blue; !* 更改背景颜色 *!*/
  font-weight: bold; /* 字体加粗 */
}

li.active a:hover {
  background-color: navy; /* 鼠标悬停时的背景颜色 */
}

nav {
    background-color: #7291ee;
    /* 背景颜色 */
    background-attachment: scroll;
    background-clip: border-box;
    background-image: none;
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: auto;
    box-sizing: border-box;
    color: rgb(102, 102, 102);
    font-size: 15px;
    height: 42px;
    left: 0px;
    min-width: 1440px;
    position: fixed;
    top: 0px;
    transition: all 0.5s ease;
    width: 100%; /* 调整为100%，以适应不同屏幕宽度 */
    z-index: 1001;
}


nav ul {
    list-style-type: none;
    /* 移除列表符号 */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
    /* 横向排列列表项 */
}

nav a {
    display: block;
    /* 使链接填充整个列表项 */
    color: black;
    /* 文字颜色 */
    text-align: center;
    /* 文字居中 */
    padding: 14px 16px;
    /* 内边距 */
    text-decoration: none;
    /* 移除下划线 */
}

/*nav a:hover {*/
/*    background-color: white;*/
/*    !* 鼠标悬停时的背景颜色 *!*/
/*    color: black;*/
/*    !* 鼠标悬停时的文字颜色 *!*/
/*}*/

@media screen and (max-width: 600px) {
    .navbar li {
        float: none; /* 在小屏幕上垂直排列 */
    }
}


#user-info {
    float: right; /* 将用户信息区域放在导航栏的右侧 */
    padding: 10px; /* 设置内边距 */
    /* 其他样式根据需要添加 */
}

#user-avatar {
    width: 40px; /* 设置头像大小 */
    height: 40px;
    border-radius: 20px; /* 圆形头像 */
}

.user-display-area {
  text-align: right; /* 例如，可以设置文本右对齐 */
  padding: 10px; /* 适当的填充 */
}

.user-name {
  margin-right: 10px; /* 用户名与链接间的间距 */
}


.site-footer hr {
  border: 0; /* 移除默认边框 */
  height: 10px; /* 线条高度 */
  background-color: #333; /* 线条颜色 */
  margin: 20px 0; /* 上下边距 */
}

.site-footer {
  background-color: #f4f4f4; /* 底部背景色 */
  text-align: center; /* 文本居中 */
  padding: 20px 0; /* 填充 */
  position: relative; /* 相对定位 */
  bottom: 0;
  width: 100%;
}

.footer-content {
  margin: 0 auto;
  padding: 20px;
}

.footer-links {
  list-style: none; /* 去除列表样式 */
  padding: 0;
}

.footer-links li {
  display: inline; /* 横排显示 */
  margin-right: 20px;
}

.footer-links a {
  text-decoration: none; /* 去除下划线 */
  color: #333; /* 链接颜色 */
}

.footer-links a:hover {
  text-decoration: underline; /* 鼠标悬停下划线 */
}

